<template>
  <up-modal :show="show" title="修改密码" showCancelButton @confirm="confirm" @cancel="cancel">
    <view class="slot-content">
      <!-- 为表单添加 ref -->
      <up-form :model="user" ref="uForm" 
        :rules="rules"
        labelWidth="160rpx" labelAlign="left">
        <up-form-item label="原密码" prop="oldPassword" class="up-border-bottom">
          <up-input v-model="user.oldPassword" type="password" placeholder="请输入原密码" border="none"></up-input>
        </up-form-item>
        <up-form-item label="新密码" prop="newPassword" class="up-border-bottom">
          <up-input v-model="user.newPassword" type="password" placeholder="请输入新密码" border="none"></up-input>
        </up-form-item>
        <up-form-item label="确认密码" prop="confirmPassword" class="up-border-bottom">
          <up-input v-model="user.confirmPassword" type="password" placeholder="请输入确认密码" border="none"></up-input>
        </up-form-item>
      </up-form>
    </view>
  </up-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { updateUserPwd } from "@/api/user";
// @ts-ignore
import  {toast}  from '@/uni_modules/uview-plus';
import type { User,Rule } from './password.type';
export default defineComponent({
  props: {
    show: {
      type: Boolean,
      required: true
    }
  },
  setup(props, { emit }) {
    const equalToPassword = (rule: any, value: string, callback: (error?: Error) => void) => {
      if (user.value.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };

    const user = ref<User>({
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    });

    const rules: Record<string, Rule[]> = {
      oldPassword: [
        { required: true, message: "旧密码不能为空", trigger: "blur" }
      ],
      newPassword: [
        { required: true, message: "新密码不能为空", trigger: "blur" },
        { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
        { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
      ],
      confirmPassword: [
        { required: true, message: "确认密码不能为空", trigger: "blur" },
        { required: true, validator: equalToPassword, trigger: "blur" }
      ]
    };

    // 定义表单的 ref
    const uForm = ref(null);

    const confirm = async () => {
      try {
        // 调用表单的 validate 方法进行校验
        if (uForm.value) {
          // 为 uForm 指定具体类型，避免类型为 never
          const form = uForm.value as { validate: () => Promise<boolean> };
          await form.validate();
        } else {
          console.error('表单 ref 未正确绑定');
        }
        // 校验通过，发送请
        updateUserPwd({
          // @ts-ignore
          params: {
            oldPassword: user.value.oldPassword,
            newPassword: user.value.newPassword
          }
        }).then(response => {
          toast('修改成功');
          user.value = {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          };
          emit('close');
        });
      } catch (error) {
        // 校验不通过，给出提示
        console.log('表单校验失败', error);
      }
    };

    const cancel = () => {
      user.value = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
      emit('close');
    };

    return {
      user,
      rules,
      confirm,
      cancel,
      uForm // 返回表单的 ref
    };
  }
});
</script>

<style lang="scss" scoped>
.slot-content {
  padding: 20rpx;
}
</style>
